<template>
  <view class="main">
    <view class="detailsHeader">
      <view class="detailsBox">
        <view class="pay-info" v-if="order.paymentTime">
          <view>
            <image src="../../static/icons/play_success.png"></image>
          </view>
          <view class="pay-i-text">
            <view>支付成功</view>
            <view>{{ contents[order.orderStatus] }}</view>
          </view>
        </view>
        <view class="pay-fail" v-else>
          <view>支付未完成，请支付</view>
          <view>15分钟未支付，订单将自动取消</view>
        </view>
        <view class="order-card-section">
          <view class="pay-line"></view>
          <view class="pay-lines"></view>
          <view class="pay-details-card">
            <view class="details-i-t">
              <image src="../../static/logo.png" mode=""></image>
              <text>飞鸽邮筒</text>
            </view>
            <view class="line"></view>
            <view class="orde-details">
              <view class="order-item">
                <view>订单编号</view>
                <view>{{ order.id }}</view>
              </view>
              <view class="order-item">
                <view>下单时间</view>
                <view>{{ order.createTime }}</view>
              </view>
              <view class="order-item">
                <view>邮费</view>
                <view>{{ order.deliveryPrice }}￥</view>
              </view>
              <template v-if="order.postcardOrder">
                <view class="order-item">
                  <view>明信片封面</view>
                  <view>
                    <image
                      mode="aspectFill"
                      style="width: 100rpx; height: 100rpx"
                      :src="order.postcardOrder.cover"
                    ></image>
                  </view>
                </view>
                <view class="order-item">
                  <view>明信片内容</view>
                  <view class="word-content">
                    {{ order.postcardOrder.content }}
                  </view>
                </view>
              </template>
              <template v-if="order.postPictureOrder">
                <view class="order-item">
                  <view>信纸样式费用</view>
                  <view>{{ order.postPictureOrder.templatePrice }}￥</view>
                </view>
                <view class="order-item">
                  <view>信纸样式</view>
                  <view>
                    <image
                      class="template-cover"
                      mode="aspectFill"
                      :src="order.postPictureOrder.template.picture"
                    ></image>
                  </view>
                </view>
                <template v-if="order.postPictureOrder.writePictureUrls">
                  <view class="order-item">
                    <view>手写照片费用</view>
                    <view
                      >{{ order.postPictureOrder.writePicturePrice }}￥</view
                    >
                  </view>
                  <view class="order-item">
                    <view>手写照片</view>
                    <view
                      ><Uploader ref="uploader" :disable="true"></Uploader
                    ></view>
                  </view>
                </template>
                <template v-if="order.postPictureOrder.wordContent">
                  <view class="order-item">
                    <view>字数费用</view>
                    <view>{{ order.postPictureOrder.wordPrice }}￥</view>
                  </view>
                  <view class="order-item">
                    <view>信封内容</view>
                    <view class="word-content">
                      {{ order.postPictureOrder.wordContent }}
                    </view>
                  </view>
                </template>
                <view class="order-item">
                  <view>照片费用</view>
                  <view>{{ order.postPictureOrder.picturePrice }}￥</view>
                </view>
                <view class="order-item">
                  <view>照片</view>
                  <view
                    ><Uploader ref="uploader2" :disable="true"></Uploader
                  ></view>
                </view>
              </template>
              <view class="product-price" v-if="order.orderProducts">
                <view class="label">商品费用：</view>
                <view class="product-wrapper">
                  <view
                    class="product"
                    v-for="(product, index) in order.orderProducts"
                    :key="index"
                  >
                    {{
                      `${product.product.name} x${product.count} ${(product.product.price*product.count).toFixed(2)}￥`
                    }}
                  </view>
                </view>
              </view>
              <view class="details-footer">
                <view>支付:</view>
                <view>
                  ¥
                  <text>{{ order.finalPrice }}￥</text>
                </view>
              </view>
            </view>

            <view class="btns">
              <view class="btn" v-if="order.orderStatus == 0">
                <button class="btn1" @click="cancel">取消订单</button>
              </view>
              <view class="btn" v-if="order.orderStatus >= 2">
                <button class="btn3" @click="logisticsShow">查看物流</button>
              </view>
              <view class="btn" v-if="order.orderStatus <= 2">
                <button class="btn2" @click="btnClick">
                  {{ buttons[order.orderStatus] }}
                </button>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts">
import {
  cancelOrder,
  confirmOrder,
  getOrder,
  ORDER_TYPE_LETTER,
  ORDER_TYPE_POSTCARD,
  ORDER_TYPE_PRODUCT,
  payOrder,
} from "@/api/order";
import {
  myFile,
  Order,
  PayParams,
  PostcardOrder,
  PostPictureOrder,
} from "@/typings";
import Vue from "vue";
import { mapState } from "vuex";
import Uploader from "@/components/uploader/uploader.vue";

export default Vue.extend({
  data() {
    return {
      buttons: {
        0: "立即支付",
        1: "",
        2: "确认收货",
      },
      titles: {
        0: "未付款",
        1: "等待发货",
        2: "已发货",
        3: "已完成",
      },
      contents: {
        0: "请于15分钟内付款，超时订单将被取消",
        1: "我们正在加速为您寄信",
        2: "您的信封已寄出",
        3: "您的订单已完结，欢迎继续使用",
      },
      order: {} as Order,
    };
  },
  computed: {
    ...mapState(["userInfo"]),
  },
  onLoad(option: any) {
    console.log(option);
    this.get(option.id);
  },
  methods: {
    switchPage(url: string) {
      uni.navigateTo({ url });
    },
    get(id: string) {
      getOrder(id).then((res: Order) => {
        if (res.id) {
          this.order = res;
          if (this.order.type == ORDER_TYPE_LETTER) {
            this.order.postPictureOrder = JSON.parse(this.order.priceDetail);
            this.order.orderProducts =
              this.order.postPictureOrder?.orderProducts;
            console.log(this.order.postPictureOrder);

            setTimeout(() => {
              //如果是手写信件
              if (this.order.postPictureOrder?.writePictureUrls) {
                let uploader = this.$refs.uploader as any;
                uploader.setFiles(
                  JSON.parse(
                    this.order.postPictureOrder?.writePictureUrls as string
                  )
                );
              }
              let uploader2 = this.$refs.uploader2 as any;
              uploader2.setFiles(
                JSON.parse(this.order.postPictureOrder?.pictureUrls as string)
              );
            }, 1000);
          } else if (this.order.type == ORDER_TYPE_POSTCARD) {
            this.order.postcardOrder = JSON.parse(this.order.priceDetail);
            if (this.order.postcardOrder) {
              this.order.postcardOrder.cover = (
                JSON.parse(this.order.postcardOrder.cover) as myFile[]
              )[0].path;
              console.log(this.order.postcardOrder);
            }
          } else if (this.order.type == ORDER_TYPE_PRODUCT) {
            this.order.orderProducts = JSON.parse(this.order.priceDetail);
          }
        }
      });
    },
    btnClick() {
      if (this.order.orderStatus == 0) {
        this.pay();
      } else if (this.order.orderStatus == 2) {
        this.confrim();
      }
    },
    logisticsShow() {
      uni.navigateToMiniProgram({appId:'wx6885acbedba59c14',path:`pages/result/result?nu=${this.order.logisticsNo}&com=&querysource=third_xcx`})
    },
    confrim() {
      confirmOrder(this.order.id).then((res) => {
        if (res == true) {
          uni.showToast({
            title: "确认成功",
            icon: "success",
          });
        }
      });
    },
    cancel() {
      cancelOrder(this.order.id).then((res) => {
        if (res == true) {
          uni.showToast({
            title: "取消成功",
            icon: "success",
          });
          setTimeout(() => {
            uni.navigateBack({});
          }, 500);
        }
      });
    },
    pay() {
      payOrder(this.order.id).then((res: string) => {
        let result: PayParams = JSON.parse(res);
        if (result.package) {
          wx.requestPayment({
            signType: result.signType,
            package: result.package,
            paySign: result.paySign,
            nonceStr: result.nonceStr,
            timeStamp: result.timeStamp,
            success: (res) => {
              uni.showToast({
                title: "支付成功",
                icon: "success",
              });
              this.get(this.order.id);
            },
          });
        }
      });
    },
  },
  components: { Uploader },
});
</script>

<style lang="scss" scoped>
.detailsBox {
  width: 100%;
  height: 337rpx;
  background: url(../../static/icons/bg.png) no-repeat;
  background-size: 100% 100%;
  position: absolute;

  .pay-info {
    display: flex;
    padding: 0rpx 0rpx 0rpx 50rpx;
    view:first-child {
      image {
        width: 150rpx;
        height: 150rpx;
      }
    }
    .pay-i-text {
      padding-top: 10rpx;

      view:first-child {
        font-size: 40rpx;
        font-weight: bold;
        color: #ffffff;
      }

      view:last-child {
        font-size: 26rpx;
        font-weight: 400;
        color: #ffffff;
        margin-top: 8rpx;
      }
    }
  }
  .pay-fail {
    margin: 20rpx 0 20rpx 50rpx;
    view:first-child {
      font-size: 40rpx;
      font-weight: bold;
      color: #ffffff;
    }

    view:last-child {
      font-size: 26rpx;
      font-weight: 400;
      color: #ffffff;
      margin-top: 8rpx;
    }
  }
  .order-card-section {
    position: relative;

    .pay-line {
      position: absolute;
      width: 672rpx;
      height: 24rpx;
      background: #047dd9;
      border-radius: 7rpx;
      left: 40rpx;
    }

    .pay-lines {
      position: absolute;
      width: 614rpx;
      height: 24rpx;
      background: url(../../static/icons/c1a794c7bd5e28075c5cd47bb6ad715.png)
        no-repeat;
      background-size: 100% 100%;
      left: 68rpx;
      top: 15rpx;
      z-index: 99;
    }

    .pay-details-card {
      position: absolute;
      width: 637rpx;
      background: url(../../static/icons/bg2.png) no-repeat;
      background-size: 100% 100%;
      left: 58rpx;
      margin-top: 10rpx;
      padding-bottom: 50rpx;
      .details-i-t {
        display: flex;
        align-items: center;
        padding: 40rpx 0rpx 24rpx 24rpx;

        image {
          width: 68rpx;
          height: 69rpx;
        }

        text {
          font-size: 31rpx;
          font-weight: bold;
          color: #333333;
          opacity: 0.9;
          margin-left: 10px;
        }
      }

      .orde-details {
        padding: 38rpx;

        .order-item {
          margin-top: 32rpx;
          display: flex;
          view:first-child {
            width: 140rpx;
            font-size: 26rpx;
            color: #999999;
            flex-shrink: 0;
          }

          view:last-child {
            font-size: 26rpx;
            color: #000000;
          }
        }
      }
      .product-price {
        margin-top: 32rpx;
        display: flex;
        align-items: flex-start;
        .label {
          width: 140rpx;
          font-size: 26rpx;
          color: #999999;
        }
        .product-wrapper {
          font-size: 26rpx;
          color: #000000;
        }
      }
      .details-footer {
        display: flex;
        justify-content: flex-end;
        margin-right: 40rpx;
        margin-top: 8rpx;
        height: 66rpx;

        view:first-child {
          font-size: 26rpx;
          font-weight: 500;
          color: #333333;
          margin-right: 15rpx;
          line-height: 78rpx;
        }

        view:last-child {
          font-size: 33rpx;
          font-weight: 500;
          color: #ff471f;
          line-height: 66rpx;

          text {
            font-size: 51rpx;
            font-weight: 500;
            color: #ff471f;
            line-height: 66rpx;
          }
        }
      }
    }

    .btns {
      position: relative;
      // position: fixed;
      // bottom: 105rpx;
      margin: 45rpx;
      // left: 0;
      // right: 0;
      display: flex;
      align-items: center;
      justify-content: space-around;
      .btn {
        display: inline;
        margin: 20rpx;

        button {
          font-size: 29rpx;
          color: #ffffff;
          background: #07c160;
          border-radius: 6rpx;
          line-height: 88rpx;
        }
        .btn1 {
          background: #ffc300 !important;
        }
        .btn3 {
          background: #10aeff;
        }
      }
    }
  }
}

.template-cover {
  width: 100rpx;
  height: 100rpx;
}
.word-content {
  height: 200rpx;
  overflow: scroll;
  // text-overflow: ellipsis;
  // white-space: nowrap;
  word-break: break-all;
}
</style>
